<template>
  <div class="form-tpl">
      <p>单行输入框：<input v-model="inputed" /> {{inputed}} </p>
      <p>多行输入框：<textarea v-model="textareaed"></textarea> {{textareaed}} </p>
      <p>单选框：<input type="radio" id="r1" value="1" v-model="redioed"/> <input type="radio" id="r2" value="2" v-model="redioed"/> {{redioed}} </p>
      <p>复选框：<input type="checkbox"  id="c1" value="1" v-model="checkboxed"/> <input type="checkbox"  id="c2" value="2" v-model="checkboxed"/>{{checkboxed}} </p>
      <p>下拉框：<select v-model="selected">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          </select> {{selected}} </p>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'FormTpl',
  setup () {
    const state = reactive({
      inputed: '',
      textareaed: '',
      redioed: '',
      checkboxed: '[]',
      selected: ''
    })
    return {
      ...toRefs(state)
    }
  }
}

</script>
<style scoped lang='scss'>

</style>
